<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>CSS_选择器的优先级_总结</title>
  <style>
  </style>
</head>
<body>
        <div>
            <h2>1.CSS_选择器的优先级_总结从高到低</h2>
            <ol>
                <li>
                    ！important<br>
                    <ul>
                        <li>
                            任何申明中带有！important的样式，优先级最高，包括内联样式。
                        </li>
                        <li>
                            如果多个!important冲突，还是需要按照权重和来源比较;
                        </li>
                        <li>
                            慎用：过度使用会破环css层叠逻辑，增加维护成本
                        </li>
                    </ul>
                </li>
                <li>
                    内联样式：直接写在HTML元素的style属性中定义样式
                </li>
                <li>
                    id选择器：以#开头的选择器
                </li>
                <li>
                    类选择器、属性选择器、伪类选择器：包括.class、[type=“text”]、:hover、:active、:focus等
                </li>
                <li>
                    元素选择器、伪元素选择器：如div、span、a、::before、::after等
                </li>
                <li>
                    通配符选择器：如*,以及子选择器（>）、相邻兄弟选择器（+）等复合符。
                </li>
                <li>
                    继承选择器：继承样式
                </li>
                </li>
            </ol>
        </div>
        <h2>2.权重的计算方式</h2>
        <div>
            当多个选择器同时匹配一个元素时，需要通过权重数值比较优先级。通常分为四个层级（A、B、C、D）按如下规则计算：
            <div>
                <ol>
                    <li>内联样式：（1,0,0,0）</li>
                    <li>id选择器：（0,1,0,0）</li>
                    <li>类选择器、属性选择器、伪类选择器：（0,0,1,0）</li>
                    <li>元素选择器、伪元素选择器：（0,0,0,1）</li>
                    <li>通配符选择器：（0,0,0,0）</li>
                </ol>
                <ul>
                    <li>
                        将选择器中的每种类型对应的数值相加，如#nav、.item、a的权重为0,1,1,1(即ID*1 + 类*1 + 元素*1)
                    </li>
                    <li>
                        逐级进行比较：从左到右比较A->B->C->D，高位数值大的优先级高
                    </li>
                    <li>
                        当同一个两组选择器匹配同一个元素时，选择器权重相同，则后定义的覆盖前定义样式。
                    </li>
                    <li>
                        对于伪元素的选择器中需要注意，后写可能不会覆盖前面的样式
                    </li>
                </ul>
            </div>
        </div>

</body>
</html>